<template>
	<view class="page">
		<view style="height: 500rpx;"></view>
		<view class="top-icon" :style="{top:$store.state.StatusBar.statusBar + 'px'}" @click="to()">
			<u-icon name='arrow-left' size="42rpx" color="#fff"></u-icon>
		</view>
		<scroll-view scroll-y="true" class="scr" :style="{height:pageheigh+'px'}">
			<view class="top">
				<m-carousel :list="list" bottom="20rpx"></m-carousel>
				<view class="icon_ voice" @click="onPlay" v-if="info.signatureDto.src">
					<view class="voice-icon">
						<image class="img" src="./img/ic_voice_record_listen.png" mode="aspectFill"></image>
					</view>
					<view class="flex1 icon_ voice-img">
						<!-- 播放 -->
						<image class="img" src="./img/gif_voice_play.gif" mode="aspectFill" v-if="video.status">
						</image>
						<!-- 不播放 -->
						<image style="width: 90%;height: 70%;" src="./img/ic_home_voice_start.png" mode="widthFix"
							v-else>
						</image>
					</view>
					<view class="size_white text_24 voice-value">
						{{info.signatureDto.seconds}}s
					</view>
				</view>
			</view>

			<view class="content mt-50">
				<view class="flex_r fa_c fj_b content-row" v-if="my != 1">
					<view class="text_34 c-fff">
						{{info.nick}}
					</view>
					<view v-if="guanzhuState == 2" class="text_28 size_white content-row-button" @click="guanzhu(1)">
						关注
					</view>
					<view style="background-image: linear-gradient(to left, #b4c3c6, #cedce1);" v-else
						class="text_28 size_white content-row-button" @click="guanzhu(2)">
						已关注
					</view>
				</view>

				<view class="flex_r fa_c fj_b content-row">
					<view class="text_24 flex_r fa_c content-row-l">
						<view class="icon_ content-row-l-icon">
							<image class="img" src="./img/ic_mine_noble.png" mode="aspectFill"></image>
						</view>
						<view class="c-fff">
							手机已认证
						</view>
					</view>
					<!-- <view class="text_28 size_white content-row-button" @click="open">
					查看位置，钻石，金币
				</view> -->
				</view>


				<!-- <view class="flex_r fa_c fj_b fun">
					<view class="flex_r fa_c fun-item">
						<view class="fun-img">
							<image class="img" src="./img/ic_meili.png" mode="aspectFill"></image>
						</view>
						<view class="">
							魅力值：{{info.fansnum}}
						</view>
					</view>
					<view class="flex_r fa_c fun-item">
						<view class="fun-img">
							<image class="img" src="./img/ic_chaifu.png" mode="aspectFill"></image>
						</view>
						<view class="c-primary">
							财富值：{{info.fansnumall}}
						</view>
					</view>
				</view> -->

				<view class="signature">
					<view class="text_34 c-fff">
						个性签名
					</view>
					<view class="text_26 c-999 mt-12 ">
						{{info.mysign}}
					</view>
				</view>


				<view class="flex_r nav">
					<view class="flex1 flex_c_c nav-item" :class="{nav_item:index === navIndex}"
						v-for="(item,index) in navList" :key="index" @click="onNav(index)">
						<view class="nav-item-title">
							{{item.title}}
						</view>
						<view class="nav-item-str">
							<view class="active-line"></view>
							<!-- <image class="img" src="./img/ic_radio_select.png" mode="aspectFill"></image> -->
						</view>
					</view>
				</view>

				<template v-if="navIndex === 0">
					<view class="infr">
						<view class="text_32 c-fff" style="margin-bottom: 10rpx;">
							资料
						</view>
						<view class="text_28 flex_r fa_c fj_b infr-row">
							<view class="flex1 flex_r fa_c infr-row-item">
								<view class="c-fff infr-row-item-title c-fff">
									性别：
								</view>
								<view class="c-fff" v-if="info.sex == 2">
									女
								</view>
								<view class="c-fff" v-else>
									男
								</view>
							</view>
							<view class="flex1 flex_r fa_c infr-row-item">
								<view class="c-fff">
									年龄：
								</view>
								<view class="c-fff">
									{{info.age}}
								</view>
							</view>
						</view>
						<view class="text_28 flex_r fa_c fj_b infr-row">
							<view class="flex1 flex_r fa_c infr-row-item">
								<view class="c-fff infr-row-item-title">
									城市：
								</view>
								<view class="c-fff">
									{{info.address}}
								</view>
							</view>
							<view class="flex1 flex_r fa_c infr-row-item">
								<view class="c-fff">
									职业：
								</view>
								<view class="c-fff">
									{{info.zhiyename}}
								</view>
							</view>
						</view>

					</view>
					<view class="infr">
						<view class="text_32 c-fff" style="margin-bottom: 10rpx;">
							Ta的标签
						</view>
						<view class="flex_r label">
						<!-- 	<view class="size_white text_28 label-item">
								哈哈哈
							</view> -->
							<view class="size_white text_28 label-item" v-for="(item,index) in info.biaoqianList">
								{{item}}
							</view>
						</view>
					</view>
				</template>

				<template v-else>
					<view class="item" v-for="(item,index) in dongtaiList">
						<view class="item-time c-999">
							{{item.fabuTime}}
						</view>
						<view class="text_28 c-fff item-text">
							{{item.message}}
						</view>
						<view class="flex_r item-list">
							<view class="item-img" v-for="(item,index) in item.imageList">
								<image class="img" mode="aspectFill" :src="item"></image>
							</view>
						</view>
						<view class="m-line">
							<m-line color="#B8B8B8" length="100%" :hairline="true"></m-line>
						</view>
					</view>
				</template>


			</view>
		</scroll-view>
		<view class="text_28 flex_r fa_c fj_b operate" v-if="my !== 1">
			<view class="icon_ operate-button" :data-value="1" @tap="to('/pages/m-pages/m-userinfos/index')">
				<view class="">
					编辑
				</view>
			</view>
		</view>


		<view class="text_28 flex_r fa_c fj_b operate" v-if="my != 1">
			<view class="icon_ operate-button_" :data-value="2" @tap="handleCalling">
				<view class="operate-icon">
					<image class="img" src="./img/ic_video_white.png" mode="aspectFill"></image>
				</view>
				<view class="size_white">
					视频聊天
				</view>
			</view> -->
			<view class="icon_ operate-button" :data-value="1" @tap="handleCalling">
				<view class="operate-icon">
					<image class="img" src="./img/ic_audio_pink.png" mode="aspectFill"></image>
				</view>
				<view class="">
					语音
				</view>
			</view>
			<view class="icon_ operate-button_" :data-value="2" @click="goMsg">
				<view class="operate-icon">
					<image class="img" src="./img/ic_user_chat_pink.png" mode="aspectFill"></image>
				</view>
				<view class="size_white">
					私信
				</view>
			</view>
		</view>
		<view style="height: 120rpx;">
		</view>
	</view>
</template>

<script>
	import {
		to
	} from '@/utils/index.js';
	export default {
		data() {
			return {
				list: [],
				dongtaiList: [],
				my: 0,
				pageno: 1,
				guanzhuState: 2,
				pageheigh:2,
				video: {
					innerAudioContext: {},
					status: false,
					userid: 0
				},
				userid: 0,
				navIndex: 0,
				isPlay: true,
				info: {
					signatureDto: {}
				},
				navList: [{
						title: '关于我'
					},
					{
						title: '动态'
					}
				]
			}
		},
		onHide() {
			if (this.video.innerAudioContext) {
				this.video.innerAudioContext.destroy();
			}
			console.log("onHide")
		},
		onLoad(option) {
			this.pageheigh = uni.getSystemInfoSync().windowHeight;
			
			uni.onWindowResize((res)=>{
				this.pageheigh=res.size.windowHeight;
			});
			console.log(this.pageheigh+'**************');
			this.userid = option.userid;
			this.my = option.my;
			this.getInfo();
		},
		onReachBottom() {
			if (this.navIndex == 1) {
				this.pageno++;
				this.getDongtai()
			}
		},
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			to,
			guanzhu(state) {
				this.guanzhuState = state
			},
			open() {
				let info = this.info;
				uni.showModal({
					title: '提示',
					content: `位置：` + info.address + `
经纬度：` + info.lat + `,` + info.lon + `
金币：` + info.voicePrice + `
钻石:` + info.videoPrice,
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			async handleCalling(e) {

				let type = e.currentTarget.dataset.value;
				console.log(this.info.tengxuncode, '通话id');
				let res = await this.$c.post("/app/user/isEnoughVideoAndVoice?tengxuncode=" + this.info.tengxuncode +
					"&type=" + Number(type))
				if (res.code != 0) {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
				}

				// 小程序通话
				// #ifdef  MP-WEIXIN
				this.$refs.TUICalling.call({
					userID: this.info.tengxuncode,
					type: type
				});
				// #endif

				// APP通话
				// #ifdef  APP-PLUS
				uni.$TUICallKit.call({
						userID: this.info.tengxuncode,
						callMediaType: Number(type)
					},
					res => {
						if (res.code === 0) {
							let type = Number(type) == 1 ? 2 : 3;
							this.$c.post("/app/user/feeDeduction?txCode=" + this.info.tengxuncode + "&type=" +
								type)
							console.log('call success');
						} else {
							console.log(`${res.msg}`);
						}
					}
				);
				// #endif
			},
			onPlay() {
				if (this.video.status) {
					//暂停
					this.video.innerAudioContext.stop();
					this.video.status = false;
				} else {
					console.log('播放')
					//播放
					this.video.innerAudioContext.play();
					this.video.status = true;
				}
			},
			goMsg() {
				uni.navigateTo({
					url: `/im/chat/chat?userid=` + this.userid + `&conversationID=C2C` + this.info.tengxuncode,
				});
			},
			async getInfo() {
				// console.log(this.userid)
				let res = await this.$c.post("/app/user/lookTinfo?userid=" + this.userid)
				if (res.code != 0) {
					// uni.navigateTo({
					//   url: '/im/login/login'
					// });
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
				}
				this.info = res.data
				this.video.innerAudioContext = uni.createInnerAudioContext();
				if (this.info.signatureDto && this.info.signatureDto.voiceUrl) {
					this.video.innerAudioContext.src = this.info.signatureDto.voiceUrl;
				} else {
					this.info.signatureDto = {}
				}
				this.video.innerAudioContext.autoplay = false;
				this.video.innerAudioContext.onPlay(() => {
					this.video.status = true;
					console.log('开始播放');
				});
				this.video.innerAudioContext.onEnded((res) => {
					this.video.status = false;
					console.log('播放结束');
				});
				console.log("======", this.info, "=========")
				this.list.push({
					img: this.info.pic
				})
				if (this.info.xingxiang) {
					let xingxiang = this.info.xingxiang.split(',');
					for (let item of xingxiang) {
						if (item != '') {
							this.list.push({
								img: item
							})
						}
					}
				}
				this.guanzhuState = this.info.guanzhuState;
				console.log(this.list)
				console.log(res.data)
			},
			onNav(index) {
				this.navIndex = index
				if (index == 1) {
					this.dongtaiList = [];
					this.pageno = 1;
					this.getDongtai()
				}
				console.log(index)
			},
			async getDongtai() {
				let res = await this.$c.post("/app/user/getTdongtai?userid=" + this.userid + "&pageno=" + this.pageno)
				this.dongtaiList = this.dongtaiList.concat(res.data)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		position: relative;
		padding-bottom: 80rpx;
	}

	.top-icon {
		position: fixed;
		left: 30rpx;
		z-index: 99;
		width: 50rpx;
		height: 50rpx;
	}
	.scr{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}

	.top {
		// position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 550rpx;

		.voice {
			position: absolute;
			z-index: 2;
			left: 30rpx;
			bottom: 100rpx;
			box-sizing: border-box;
			padding: 0 8rpx 0 0;
			width: 260rpx;
			height: 50rpx;
			border-radius: 25rpx;
			background-color: #ff0f6f;

			.voice-icon {
				width: 50rpx;
				height: 50rpx;
				overflow: hidden;
				border-radius: 50%;
			}

			.voice-img {
				height: 100%;
				margin: 0 10rpx;
			}

			.voice-value {
				box-sizing: border-box;
				margin-right: 10rpx;
			}
		}

	}

	.content {
		box-sizing: border-box;
		padding: 30rpx 40rpx;
		position: relative;
		z-index: 2;
		width: 100%;
		// border-radius: 30rpx 30rpx 0 0;
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 0, 0, 0));

		.content-row {
			width: 100%;
			margin-bottom: 30rpx;

			.content-row-l {
				.content-row-l-icon {
					width: 50rpx;
					height: 50rpx;
					margin-right: 10rpx;
				}

			}

			.content-row-button {
				box-sizing: border-box;
				padding: 0 50rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				border-radius: 40rpx;
				background: linear-gradient(180deg, #FDB175 5%, #F49C66 100%);
				// background-image: linear-gradient(to left, #ff94b4, #fe437a);
			}
		}


		.fun {
			width: 100%;
			margin-bottom: 30rpx;

			.fun-item {
				width: calc(50% - 15rpx);
				height: 150rpx;
				border-radius: 20rpx;
				background-color: rgba(255, 255, 255, 0.1);

				.fun-img {
					width: 80rpx;
					height: 80rpx;
					margin: 0 24rpx 0 40rpx;
					border-radius: 50%;
				}

				view {
					color: $uni-color-primary;
				}
			}

		}

		.signature {
			margin-bottom: 30rpx;
		}




		.nav {
			width: 100%;
			height: 130rpx;

			.nav-item {
				height: 100rpx;
				transition: all .3s;

				.nav-item-title {
					color: #bebebe;
					transition: all .3s;
				}

				.nav-item-str {
					opacity: 0;
					transition: all .3s;
					width: 50rpx;
					height: 30rpx;
				}

				.active-line {
					width: 100%;
					height: 6rpx;
					border-radius: 12rpx;
					background: #FDB175;
					margin-top: 12rpx;
				}
			}

			.nav_item {
				.nav-item-title {
					color: $uni-color-primary;
					font-size: 34rpx;
					transition: all .3s;
				}

				.nav-item-str {
					position: relative;
					width: 50rpx;
					height: 30rpx;
					transition: all .3s;
					opacity: 1;
				}
			}



		}


		.infr {
			width: 100%;
			margin: 0 auto 30rpx auto;
		}

		.infr-row {
			width: calc(100% - 30rpx);
			height: 88rpx;

			.infr-row-item {
				height: 100%;
				margin-left: 20rpx;

				.infr-row-item-title {
					margin-right: 10rpx;
				}
			}
		}

		.label {
			width: 100%;
			flex-wrap: wrap;

			.label-item {
				box-sizing: border-box;
				padding: 0 30rpx;
				height: 50rpx;
				border-radius: 8rpx;
				margin-left: 20rpx;
				margin-top: 20rpx;
				line-height: 50rpx;
				font-size: 28rpx;
				background-color: rgba(255, 255, 255, 0.1);
			}
		}


		.item {
			position: relative;
			margin-bottom: 20rpx;
			padding-bottom: 20rpx;

			.m-line {
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
			}

			.item-time {
				height: 50rpx;
			}

			.item-text {
				margin-bottom: 15rpx;
			}

			.item-list {
				position: relative;
				left: -15rpx;
				width: calc(100% + 15rpx);
				flex-wrap: wrap;

				.item-img {
					width: calc(33.33% - 15rpx);
					height: 230rpx;
					margin-left: 15rpx;
					margin-bottom: 15rpx;
					border-radius: 14rpx;
					background-color: #4bfff0;
				}
			}

		}
	}

	.operate {
		box-sizing: border-box;
		padding: 20rpx 40rpx;
		position: fixed;
		bottom: 10rpx;
		left: 0;
		z-index: 99;
		width: 100%;

		view {
			color: $uni-color-primary;
		}

		.operate-icon {
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
		}

		.operate-item {
			.operate-icon {
				margin-right: 0rpx;
			}
		}

		.operate-button_ {
			box-sizing: border-box;
			padding: 0 40rpx;
			height: 80rpx;
			border-radius: 44rpx;
			background: linear-gradient(180deg, #FDB175 5%, #F49C66 100%);
			/* background-image: linear-gradient(to left, #c745fd, #d36dfd); */

			.size_white {
				color: #fff;
			}
		}

		.operate-button {
			box-sizing: border-box;
			padding: 0 30rpx;
			height: 80rpx;
			border-radius: 44rpx;
			border: 1px solid $uni-color-primary;
		}
	}
</style>